<div class="row">
	<div class="col-sm-10">
	<ul class="list-unstyled clearfix">
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-blue"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px; background: #367fa9"></span><span
									class="bg-light-blue"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin">Blue</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-black"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div
								style="box-shadow: 0 0 2px rgba(0, 0, 0, 0.1)" class="clearfix">
								<span
									style="display: block; width: 20%; float: left; height: 7px; background: #fefefe"></span><span
									style="display: block; width: 80%; float: left; height: 7px; background: #fefefe"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #222"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin">Black</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-purple"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-purple-active"></span><span class="bg-purple"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin">Purple</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-green"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-green-active"></span><span class="bg-green"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin">Green</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-red"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-red-active"></span><span class="bg-red"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin">Red</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-yellow"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-yellow-active"></span><span class="bg-yellow"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #222d32"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin">Yellow</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-blue-light"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px; background: #367fa9"></span><span
									class="bg-light-blue"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin" style="font-size: 12px">Blue
							Light</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-black-light"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div
								style="box-shadow: 0 0 2px rgba(0, 0, 0, 0.1)" class="clearfix">
								<span
									style="display: block; width: 20%; float: left; height: 7px; background: #fefefe"></span><span
									style="display: block; width: 80%; float: left; height: 7px; background: #fefefe"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin" style="font-size: 12px">Black
							Light</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-purple-light"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-purple-active"></span><span class="bg-purple"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin" style="font-size: 12px">Purple
							Light</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-green-light"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-green-active"></span><span class="bg-green"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin" style="font-size: 12px">Green
							Light</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-red-light"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-red-active"></span><span class="bg-red"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin" style="font-size: 12px">Red
							Light</p></li>
					<li style="float: left; width: 33.33333%; padding: 5px;"><a
						href="javascript:void(0)" data-skin="skin-yellow-light"
						style="display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)"
						class="clearfix full-opacity-hover-null"><div>
								<span
									style="display: block; width: 20%; float: left; height: 7px;"
									class="bg-yellow-active"></span><span class="bg-yellow"
									style="display: block; width: 80%; float: left; height: 7px;"></span>
							</div>
							<div>
								<span
									style="display: block; width: 20%; float: left; height: 20px; background: #f9fafc"></span><span
									style="display: block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
							</div></a>
						<p class="text-center no-margin" style="font-size: 12px">Yellow
							Light</p></li>
				</ul>
				</div>
				<div class="col-sm-2">
					<div class="checkbox icheck" title="刷新生效">
							<label> <input name="mutiPage" type="checkbox"
								value="1"> 多页签
							</label>
						</div>
				</div>
</div>
<script type="text/javascript">
$(function(){
	$("input[name='mutiPage']").iCheck({
		checkboxClass : 'icheckbox_square-blue',
		radioClass : 'iradio_square-blue',
		increaseArea : '20%' // optional
	});
	$("input[name='mutiPage']").on('ifClicked', function(event){
		if ($(this).is(":checked")){//即将取消
			localStorage.setItem("mutiPage", "0");
		} else {
			localStorage.setItem("mutiPage", "1");
		}
	});
	$("#push-menu").click(function(){
		 if ($("body").hasClass("sidebar-collapse")) {//准备展开
			 localStorage.setItem("sidebar-collapse", "0");
		 } else {
			 localStorage.setItem("sidebar-collapse", "1");
		 }
	 });
	$(window).on('load', function() {
	var sidebarCollapse = localStorage.getItem("sidebar-collapse");
	if ("1" == sidebarCollapse) {
		$("body").addClass("sidebar-collapse");
	} else {
		$("body").removeClass("sidebar-collapse");
	}
	if (localStorage.getItem("mutiPage") == '1') {
		$("input[name='mutiPage']").iCheck('check');
	}
});
})
/**
 * 换肤功能
 */
/**
 * List of all the available skins
 * 
 * @type Array
 */
var mySkins = [ 'skin-blue', 'skin-black', 'skin-red', 'skin-yellow',
		'skin-purple', 'skin-green', 'skin-blue-light', 'skin-black-light',
		'skin-red-light', 'skin-yellow-light', 'skin-purple-light',
		'skin-green-light' ]

/**
 * Get a prestored setting
 * 
 * @param String
 *            name Name of of the setting
 * @returns String The value of the setting | null
 */
function get(name) {
	if (typeof (Storage) !== 'undefined') {
		return localStorage.getItem(name)
	} else {
		window
				.alert('Please use a modern browser to properly view this template!')
	}
}

/**
 * Store a new settings in the browser
 * 
 * @param String
 *            name Name of the setting
 * @param String
 *            val Value of the setting
 * @returns void
 */
function store(name, val) {
	if (typeof (Storage) !== 'undefined') {
		localStorage.setItem(name, val)
	} else {
		window
				.alert('Please use a modern browser to properly view this template!')
	}
}


/**
 * Replaces the old skin with the new skin
 * 
 * @param String
 *            cls the new skin class
 * @returns Boolean false to prevent link's default action
 */
function changeSkin(cls) {
	$.each(mySkins, function(i) {
		$('body').removeClass(mySkins[i])
	})

	$('body').addClass(cls)
	store('skin', cls)
	return false
}

/**
 * Retrieve default settings and apply them to the template
 * 
 * @returns void
 */
function setup() {
	var tmp = get('skin')
	if (tmp && $.inArray(tmp, mySkins))
		changeSkin(tmp)

		// Add the change skin listener
	$('[data-skin]').on('click', function(e) {
		//if ($(this).hasClass('knob')) return
		e.preventDefault()
		changeSkin($(this).data('skin'))
	})
}
setup()


</script>
			